<template>
    <div class="box">
        <heards title="主页"></heards>
        <div style="display: flex; align-items: center;">
            <van-search v-model="title" placeholder="请输入搜索关键词" style="width: 80%;" /><van-icon name="bars"
                @click="cat" />
        </div>

        <!-- 轮播图 -->
        <swipe :list="list"></swipe>
        <!-- <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in list" :key="image">
                <img :src="image.image_src" style="width: 100%;" />
            </van-swipe-item>
        </van-swipe> -->
        <!-- nav -->
        <van-grid :border="false" :column-num="4">
            <van-grid-item v-for="(v, i) in list1" :key="i">
                <van-image :src="v.image_src" />
            </van-grid-item>
        </van-grid>
        <van-pull-refresh v-model="loading" @refresh="onRefresh">
            <!-- 瀑布流 -->

            <van-grid :border="false" :column-num="2">
                <van-grid-item v-for="(v, i) in list2" :key="i">
                    <van-image
                        :src="v.goods_big_logo ? v.goods_big_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'" />
                    <p>{{ v.goods_name }}</p>
                </van-grid-item>
            </van-grid>
        </van-pull-refresh>

        <van-floating-bubble v-model:offset="offset" axis="xy" icon="chat" v-if="isShow" style="width: 90%;">
            <span>新用户福利</span>
            <span @click="sher">X</span>
        </van-floating-bubble>
    </div>
</template>

<script setup>
import swipe from '@/assets/swipe.vue';
import heards from '@/assets/heards.vue';
import { ref } from 'vue'
import { swiperdataApi, catitemsApi, searchApi } from '@/api/api';
import { showToast } from 'vant';

//悬浮框
let isShow = ref(true)
const offset = ref({ x: 100, y: 800 });
const sher=()=>{
    localStorage.setItem('sherk',isShow.data.sherk)
    isShow.value=false
}
//轮播图
let list = ref([])
const swiper = () => {
    swiperdataApi().then((res) => {
        list.value = res.data.message
    })
}
swiper()
//nav
let list1 = ref([])
const catitems = () => {
    catitemsApi().then((res) => {
        list1.value = res.data.message
    })
}
catitems()
//瀑布刘
let list2 = ref({})
const search = () => {
    searchApi().then((res) => {
        list2.value = res.data.message.goods
    })
}
search()

//下拉刷新
const loading = ref(false);
const onRefresh = () => {
    setTimeout(() => {
        showToast('刷新成功');
        loading.value = false;
        search()
    }, 1000);
};

import { useRoute, useRouter } from 'vue-router'
// import { showToast } from 'vant';

const router = useRouter()
const route = useRoute()
const cat = () => {
    router.push('/home/list')
}
</script>

<style lang="scss" scoped></style>